@import 'setting';
@import 'reset';

html, body { height: 100%; font-size: $baseFontSize;}
.site { min-height: 100%; margin-bottom: -80px;}
.siteFooter, .push { height: 80px;}

.inner { max-width: 1200px; margin: 0 auto; padding-left: 20px; padding-right: 20px;}
.site-content { padding-bottom: 30px;}

body { background: $white; font-family: $baseFontFamily;}

.btn { display: inline-block; padding: 6px 20px; border-radius: 5px;}
.btn-primary { background: $red; color: $white;
  &:hover { background: $redLight; color: $white;}
}

.siteHeader { padding: 15px 0 0; margin-bottom: 30px; border-bottom: 1px solid $grayLighter;
  h1 { margin-bottom: 20px; font-size: 42px; font-weight: bold;
    a { color: $black;
      &:hover { color: $primary;}
    }
    small { display: block; margin-top: 5px; font-size: 14px; font-weight: normal;}
  }
  nav { font-size: 16px;
    li { display: inline-block;
      a { display: block; padding: 15px 25px;
        &:first-child { padding-left: 0;}
      }
      &.current-menu-item {
        a { color: $red;}
      }
    }
  }
}
.site-logo { width: 132px; float: left;
  a { display: block; height: 50px; background: url(../images/logo.png) no-repeat;
    text-indent: -999em; overflow: hidden;
  }
}
.banners { height: 300px; margin-top: -20px; margin-bottom: 30px;
  li { height: 300px; background-repeat: no-repeat; background-position: 50%;}
}
.siteMain { padding-bottom: 50px;}
.siteFooter { background: $grayDarker; color: $gray;
  .inner { padding: 20px 0;}
  p { padding: 5px 0;}
  nav { margin-bottom: 10px;
    li { display: inline-block;
      a { display: block; padding: 0 15px 0 14px; line-height: 1; color: $grayLight;
        &:hover { color: $red;}
      }
      border-left: 1px solid $gray;
      &:first-child { border-left: none;}
    }
  }
}

.primary { margin-right: 260px;}
.sidebar { float: right; width: 220px;
  .widget { margin-bottom: 40px;}
}

.widget {
  h3 { border-bottom: 1px solid $grayLightest; padding-bottom: 10px; margin-bottom: 10px; color: $black;}
}

.postTitle, .postList h2 { margin-bottom: 20px; font-size: 38px; font-weight: lighter;
  span, a { display: block; position: relative; padding-top: 20px;}
  small { position: absolute; top: 0; left: 0; font-size: 12px;
    i { font-weight: bold;}
    time { display: inline-block; margin-right: 10px;}
  }
}

.postTitle { border-bottom: 1px solid $grayLighter; padding-bottom: 25px; margin-bottom: 30px;}

.postList {
  li { border-bottom: 1px solid $grayLightest; padding-bottom: 15px; margin-bottom: 30px;}
}

.breadcrumb { margin-bottom: 40px;
  a, span, i { display: inline-block; vertical-align: top;}
  i.fi-angle-right { width: 0; height: 0; margin: 0 10px; border: 5px solid $white; border-left-color: $grayLight;
    position: relative; top: 5px;
  }
}

article {
  position: relative;
  .post-edit-link { position: absolute; top: 0; right: 0;}
  .entry { margin-top: 14px; margin-bottom: 14px; color: $grayDarker;}
}

.entry { font-size: 16px; color: $grayDark; line-height: 1.8;
  @import 'entry';
}

// Comment list
.comments-area { margin-top: 20px; padding-top: 20px; border-top: 1px solid $grayLight;
  h2 { font-size: 18px;}
  li.comment { margin-bottom: 20px; border-bottom: 1px solid $grayLight; padding-bottom: 20px;
    ol { margin-top: 20px; padding-top: 20px; margin-left: 65px; border-top: 1px solid $grayLight;}
    .comment-respond { margin-left: 65px; padding-top: 20px;}
  }
  article { position: relative; padding-left: 65px;
    .edit-link { position: absolute; top: 0; right: 0;}
    .reply { position: absolute; bottom: 0; right: 0;}
    time { font-size: 12px; color: $gray;}
  }
  .comment-meta { margin-bottom: 10px;
    img { position: absolute; top: 0; left: 0; width: 50px; height: 50px; border: 1px solid $grayLight;}
    .comment-metadata { padding-top: 5px;}
    b { display: inline-block; margin-right: 5px;}
    .says { display: none;}
  }
  .comment-content { line-height: 1.8;}
}
